import React from "react";
import {Avatar, Input, Button, Card, Pagination, Drawer, Image, Tag, Popconfirm, message } from "antd";
import {EditOutlined, ToTopOutlined, SearchOutlined, DeleteOutlined} from "@ant-design/icons";
import { tutorialfind, tutorialdelete, tutorialike } from '../util/api'

class Jc extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            jclist: null,
            length: null,
            visible: false,
            one: null,
            page: 1,
        }
        this.onpageChange = this.onpageChange.bind(this)
        this.tutorialfind = this.tutorialfind.bind(this)
    }
    componentDidMount(){
        this.tutorialfind()
    }

    async tutorialfind(page){
        const res = await tutorialfind(page)
        const { success, data, maxpage, length } = res.data
        if(success){
            this.setState({
                jclist: data.rows,
                length: length
            })
        }
    }

    onChange(date, dateString) {
        console.log(date, dateString);
    }

    onpageChange(page){
        console.info('改变',page)
        this.tutorialfind(page)
    }
    showDrawer = (r) => {
        console.info('单个',r)
        this.setState({
            visible: true,
            one: r
        })
    };

    onClose = () => {
        this.setState({
            visible: false
        })
    };

    deconfirm = async e => {
        console.log(e);
        const res = await tutorialdelete(e.tutorialid)
        const { success, msg } = res.data
        if(success){
            message.success(msg);
            this.setState({
                jclist: null,
                page: 1
            })
            this.tutorialfind()
        }
    }

    decancel = e => {
        console.log(e);
        message.success('取消删除');
    }
    onSearch =async value => {
        if( value == '' ) return message.error('请输入搜索内容');
        const res = await tutorialike(value)
        const { success, data, length } = res.data
        if(success){
            this.setState({
                jclist: data,
                length: length
            })
        }
    };

    render() {
        const { Meta } = Card;
        const { jclist, one } = this.state;
        console.info(jclist)
        console.info(one)
        const relist = [];
        const imglist = [];
        const content = [];
        if(one){
            one.pictures.map(item=>{
                imglist.push(
                    <Image src={item.photourl} alt=""/>
                )
            })
            content.push(
                <Card title="教程内容" style={{ width: 600 }}>
                    <span>{one.tocontent}</span>
                </Card>
            )
        }
        if(jclist){
            jclist.map(r=>{
                relist.push(
                    <Card
                        style={{ width: 300 }}
                        cover={
                            <img
                                alt="example"
                                src={r.pictures[0].photourl}
                            />
                        }
                        actions={[
                            <Popconfirm
                                title="你是否确定要删除该作品?"
                                onConfirm={() => this.deconfirm(r)}
                                onCancel={() => this.decancel(r)}
                                okText="Yes"
                                cancelText="No"
                            >
                                <DeleteOutlined key="setting" />
                            </Popconfirm>,
                            <EditOutlined onClick={() => this.showDrawer(r)} key="edit" />,
                            <ToTopOutlined key="ellipsis" />,
                        ]}
                    >
                        <Meta
                            avatar={<Avatar src={r.user.uportrait} />}
                            title={r.user.username}
                            description={r.tttheme}
                        />
                    </Card>
                )
            })
        }

        console.info("数据",jclist)
        const { Search } = Input;
        return(
            <div className="rel-body">
                <div className="rel-title">
                    <Search
                        placeholder="请输入你想搜索的教程主题或相关内容"
                        allowClear
                        enterButton="Search"
                        style={{width:400}}
                        onSearch={this.onSearch}
                    />
                    <div className="buttonbox">
                        <Button type="primary" onClick={this.tutorialfind} shape="round" icon={<SearchOutlined />}>
                            查看全部
                        </Button>
                    </div>
                    <div className="pagination">
                        <Pagination onChange={this.onpageChange} defaultCurrent={this.state.page} total={this.state.length || 10} />
                    </div>
                </div>
                <div className="release">
                    {relist}
                </div>
                <Drawer
                    title="教程详情"
                    width={700}
                    placement="right"
                    closable={false}
                    onClose={this.onClose}
                    visible={this.state.visible}
                >
                    <Card style={{ width: 600 }} >
                        <Meta
                            avatar={
                                <Avatar src={this.state.one? this.state.one.user.uportrait : ''} />
                            }
                            title={this.state.one? this.state.one.user.username : ''}
                            description={this.state.one? this.state.one.user.signature : ''}
                        />
                    </Card>
                    <div className="relcontent">
                        {content}
                    </div>
                    <div className="img-box">
                        {imglist}
                    </div>
                </Drawer>
            </div>

        )

    }
}
export default Jc
